import { Helmet } from "react-helmet-async";
import { useSearchParams } from "react-router-dom";

import { Button, Swiper } from "antd-mobile";
import { useEffect, useState } from "react";
import { products } from "@/commen/data";
import { Popup } from "antd-mobile";
import { PopupProduct } from "../components/PopupProduct";
export type Product = {
  name: string;
  price: string;
  mainImage: string;
  id: number;
  keyword: string;
  carouselImages: Array<string>;
} & Record<string, any>;

export default function GoodsDetail() {
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get("keyword");
  const [product, setProduct] = useState<Product | null>();
  useEffect(() => {
    const found = products.find((item) => item.keyword === keyword);
    if (found) {
      setProduct(found);
    } else {
      setProduct(null);
    }
  }, [keyword]);

  const [visible, setVisible] = useState(false);
  const [type, setType] = useState(1);

  const handleClose = () => {
    setVisible(false);
  };

  const handleSubmit = (pro: Product) => {
    console.log(pro);
    if (type === 1) {
      //加入购物车
    }
    if (type === 2) {
      //立即购买
    }
  };

  return (
    <div>
      <Helmet>
        <title>商品详情</title>
      </Helmet>
      <div className="swiper">
        <Swiper>
          {product?.carouselImages.map((item) => (
            <Swiper.Item key={item}>
              <img src={item} alt="" />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className="p-4">
        <div className="flex items-center">
          <div className="text-red-500 font-sans">
            ¥<span className="text-xl font-bold">{product?.price}</span>
          </div>
          <div className="ml-1 text-xs text-white px-1.5 py-1 bg-red-500 rounded">
            到手价
          </div>
        </div>
        <div className="font-bold text-sm">{product?.name}</div>
      </div>
      <div className="fixed left-0 bottom-0 h-12 border-t border-gray-100 w-screen flex items-center justify-end">
        <div className="mr-1">
          <Button
            color="danger"
            shape="rounded"
            size="middle"
            style={{ fontSize: "14px" }}
            onClick={() => {
              setVisible(true);
              setType(1);
            }}
          >
            加入购物车
          </Button>
        </div>
        <div>
          <Button
            color="warning"
            shape="rounded"
            size="middle"
            style={{ fontSize: "14px" }}
            onClick={() => {
              setVisible(true);
              setType(2);
            }}
          >
            立即购买
          </Button>
        </div>
      </div>
      <Popup
        visible={visible}
        showCloseButton
        onClose={handleClose}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "28vh",
        }}
      >
        <PopupProduct
          product={product!}
          onClose={handleClose}
          onSubmitAdd={handleSubmit}
        ></PopupProduct>
      </Popup>
    </div>
  );
}
